<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
         width: 400px;
         height: 300px;
         background-color: rgb(230, 175, 175);
        }
        /* 大于800px时，最小值不能低于800px */
        @media (min-width:800px) {
            .box{
              background-color: rgb(240, 17, 17);
            }
            
        }
        /* 小于600px时，最高值不能高于600px */
        @media (max-width:600px) {
            .box{
             background-color: rgb(10, 5, 30);
            }
        }
        /* max-width最大值，min-width最小值 */
        @media (min-width:1000px) {
            .box{
             background-color: rgb(28, 216, 163);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>